<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>来访人员</title>
    <!--引入css文件-->
    <link  type="text/css" rel="stylesheet"  th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>
    <link  type="text/css" rel="stylesheet"  th:href="@{/bootstrap-3.3.7-dist/css/bootstrap-table.min.css}"/>
    <link  type="text/css" rel="stylesheet"  th:href="@{/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css}"/>
    <link  type="text/css" rel="stylesheet"  th:href="@{/bootstrap-3.3.7-dist/css/bootstrap-editable.css}"/>

    <!--引入js文件-->
    <script type="text/javascript"  th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript"  th:src="@{/js/jquery.serializejson.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap-table.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap-editable.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap-table-editable.min.js}"></script>
    <script type="text/javascript"  th:src="@{/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js}"></script>
    <style>
        body{
            display: block !important;
            margin: auto !important;
        }
        table{
            width: 80vw !important;
        }
        tr{
            text-align: center !important;
        }
    </style>

</head>
<body>
    <div class="btn-group" role="group"  id="toolbar" >
        <button type="button" class="btn btn-default"
                data-toggle="modal" data-target="#create_modal" th:onclick="my_now()">当天访问情况
        </button>
        <button type="button" class="btn btn-default"
                data-toggle="modal" data-target="#upload_modal" th:onclick="my_status()">访问申请</button>
        <button type="button" class="btn btn-default" th:onclick="my_record()">来访记录</button>
        <button type="button" class="btn btn-default">黑名单</button>
        <span id="uname_span" style="float:right;margin-left:700px;"></span>
    </div>
<!--    <table>-->
<!--        <tr>-->
<!--            <td>-->
<!--                <ul>-->
<!--                    <li></li>-->
<!--                    <li></li>-->
<!--                </ul>-->
<!--                <ul>-->
<!--                    <li></li>-->
<!--                    <li></li>-->
<!--                </ul>-->
<!--                <ul>-->
<!--                    <li></li>-->
<!--                    <li></li>-->
<!--                </ul>-->
<!--            </td>-->
<!--        </tr>-->
<!--    </table>-->
    <!--定义表格-->
    <table class="table"  id="tab">

    </table>
</body>
<script th:inline="javascript">
    function my_now(){
        location.href=[[@{/visitors/now}]];
    }
    function my_status(){
        location.href=[[@{ /visitors/page}]];
    }
    function my_record(){
        location.href=[[@{ /visitors/record}]];
    }
    let data = [[${page}]];
    $(function(){
        console.log(data);
        if (data == null){
            data = [[${list}]];
        }else{
            data= data.records;
         }
        setTableData();
    });

    //给table中填充数据
    function setTableData(){
        $("#tab").bootstrapTable({
            toolbar:"#toolbar",//添加按钮组
            cache:false,
            data:data,
            //定义columns属性  指定每列要显示的内容
            columns:[
                {checkbox:true//删除的多选框
                },{
                    title:"编号",//指定列名
                    field:"vid"   //要显示data中对象的那个属性的值
                },{
                    title:"访问人姓名",
                    field:"visitingName"
                }, {
                    title: "被访问人",
                    field: "vvinterviewedName"
                },{
                    title:"访问人数",
                    field:"visitingNumber"
                },{
                    title:"被访问人",
                    field:"vvinterviewedName"
                },{
                    title:"访问人与被访问人关系",
                    field:"vnexus"
                },{
                    title:"访问人图片",
                    field:"vvinterviewedImage"
                },{
                    title:"访问人电话",
                    field:"vvinterviewedPhone"
                },{
                    title:"访问人身份证号",
                    field:"vvinterviewedIdentityNumber"
                },{
                    title:"预约时间",
                    field:"vreserveTime"
                },{
                    title:"审批时间",
                    field:"vstatus"
                },{
                    title:"审批状态",
                    field:"vcheckTime"
                }
            ]
        });
    }
</script>
</html>